<!DOCTYPE html>
<html>
<div th:fragment="page">
    <style>
        .pagination{margin: 0.5em 0 0 0}
    </style>

    <div th:with="pages = ${(page.total+page.size-1)/page.size}" class="pagination">
        <span>共[[${page.total}]]条，</span>
        <span th:with="size = ${page.size}">每页
            <select name="pageSize" th:onchange="changePageSize();"/>
                <option value="10" th:selected="${#request.getParameter('size')} == '10' or ${size} == '10'">10</option>
                <option value="20" th:selected="${#request.getParameter('size')} == '20' or ${size} == '20'">20</option>
                <option value="50" th:selected="${#request.getParameter('size')} == '50' or ${size} == '50'">50</option>
                <option value="100" th:selected="${#request.getParameter('size')} == '100' or ${size} == '100'">100</option>
                <option value="500" th:selected="${#request.getParameter('size')} == '500' or ${size} == '500'">500</option>
            </select>条，
        </span>
        <span>共[[${pages}]]页&nbsp;&nbsp;</span>
        <span th:if="${page.current>1}">
            <a href="javascript:void(0);" th:onclick="pageClick([[${page.current}-1]]);">上一页</a>
        </span>
        <span th:if="${page.current<=1}">上一页</span>
        <span th:if="${page.current< pages}">
            <a href="javascript:void(0);" th:onclick="pageClick([[${page.current}+1]]);">下一页</a>
        </span>
        <span th:if="${page.current>=pages}">下一页</span>
        <span th:if="${page.current>1}">
            <a href="javascript:void(0);" th:onclick="pageClick(1);">首页</a>
        </span>
        <span th:if="${page.current<pages}">
            <a href="javascript:void(0);" th:onclick="pageClick([[${pages}]]);">尾页</a>
        </span>
        <span>第[[${page.current}]]页</span>
    </div>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
            var xmlHttp;
            var pageClickUrl = [[${#request.getRequestURI()}]];
            var pageSize = document.getElementsByName("pageSize")[0];
            var params = [[${param}]];

            var pageClick = function (pageNo) {
                let url = pageClickUrl+"?current="+pageNo+"&size="+getSelectValue(pageSize);
                for (let key in params) {
                    if (key != 'current' && key != 'size') {
                        url += "&"+key+"="+params[key][0];
                    }
                }
                xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function() {pageClickCallback()};
                xmlHttp.open("GET",url, true);
                xmlHttp.send();
            }
            var pageClickCallback = function() {
                if (xmlHttp.readyState==4) {
                    if (xmlHttp.status == 200) {
                        var res = xmlHttp.responseText;
                        document.body.innerHTML = null;
                        document.write(res);
                    }
                }
            }

            var getSelectValue = function (selectTag) {
                if(selectTag) {
                    var index = selectTag.selectedIndex;
                    return selectTag.options[index].value;
                }
            }

            var changePageSize = function() {
                pageClick(1);
            }
        /*]]>*/
    </script>
</div>

</html>
